<template>
<!-- // 社区简介详情 -->
  <div class="Introduction">
    <!-- 顶部导航栏 --> 
    <van-nav-bar  title="曲江圣境" left-arrow @click-left="$router.go(-1)" />
    
    <!-- 社区简介 -->
    <div class="instructions">
      <div class="instruc-box">
        <!-- 社区名 -->
        <div class="fl ">
          <div class="instruc-title">{{title}}</div>
          <div class="van-cells">
            <div class="instruc-map">{{updateDate}}</div>
          </div>
          
        </div>
      </div>
      <!-- 简介 -->
      <div class="instruc-Community">
          <div class="title-city" v-html="content"></div>
      </div>
      
    </div>
    
  </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
   export default {
    data() {
      return {
        id:this.$route.query.id ? this.$route.query.id : '',
        title: "",
        map:"2018/12/12",
        content:"",
        bannerImg:"",
        updateDate:""
      }
    },
    mounted(){
      this.getBannerDeatils();// 轮播图详情
    },
    methods:{
      //轮播图详情
      getBannerDeatils(){
        let parmes  = {
          bannerId:this.id
        }
        apiHttp.apiIndex.getBannerDeatils(parmes,resp=>{
          if(resp.resultCode == '000000'){
            this.title = resp.data.banner.title
            this.content = resp.data.banner.content
            this.updateDate = resp.data.banner.updateDate
          }else{
            Toast(resp.resultMsg);
          }
        })
      }
    }
  }
</script>
<style scoped>
  .title-city>>> img{
    width: 100%!important;
    height: 100%!important;
  }
  .title-city{
      font-size: 0.6rem;
      line-height: 0.9rem;
    }
  .van-nav-bar__right span{
    color: #D33043!important;
  }
  .Intr-img{
    height: 9rem;
  }
  .instructions{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 1rem;
  }

  .instructions .instruc-box::after {
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
  }
  .instruc-title{
    
    color: #000000;
    font-size: 0.8rem;
  }
  .instruc-title::after{
    position: absolute;
    left: -10px;
    /* top: 28px; */
    content: '';
    width: 3px;
    border-top: 18px solid #D33043;
  }
  .instruc-map{
    font-size: 0.6rem;
    color: #999999;
   
  }
  .instruc-box{
    position: relative;
    padding: 0.8rem 0 0.5rem 0;
  }
  .van-icon{
    min-width: 1em;
    font-size: 16px;
    line-height: 24px;
    margin-right: 5px;
  }
  .van-cells {
     margin-top: 0.3rem;
    /* width: 100%; */
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 24px;
    color: #333;
    font-size: 14px;
    overflow: hidden;
  }
  .share{
    background-color: #D33043;
    color: #ffffff;
    margin: 0;
    padding: 0.05rem 0.5rem;
    border-radius: 20px;
  } 
  /* 简介 */
  .community span{
    color: #333333;
    font-size: 0.6rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    display: inline-block;
  }
  
  .community{
    margin-bottom: 0.3rem;
  }
  .share-box{
        overflow: hidden;
    width: 100%;
  }

  .share em {
    width: .6rem;
    height: .6rem;
    display: block;
    float: left;
    line-height: 1rem;
    margin-right: 0.3rem;
  }
</style>